<#assign hasFile=false/>
<#assign hasPerSel=false/>
<#list columnList as column>
    <#if column.form>
        <#if column.formType == 'file'>
            <#assign hasFile=true/>
        <#elseif column.formType == 'orgPer'>
            <#assign hasPerSel=true/>
				<#else>
				</#if>
    </#if>
</#list>
<template>
	<!-- ${moduleName} -->
	<!-- 国际化标题：$t('${className}.form.title') -->
	<div class="form-content size">
		<div class="panel-box" id="panelBox">
			<div class="panel-wrap size">
				<div class="panel-title clearfix">
					{{
					form.oprType === 1 ?
						$t("components.uiButton.add")
						: form.oprType === 2 ? $t("components.uiButton.edit") : ''
					}}{{ menuName }}{{ form.oprType === 3 ? $t("components.uiButton.detail") : ''}}
					<div class="fr">
						<Icon type="md-close" size="20" class="cursor-pointer" @click="closeForm"/>
					</div>
				</div>
				<div style="padding-top: 16px; height: calc(100% - 51px)" class="scroll-bar">
					<Form
									ref="formData"
									:model="formData"
									:rules="ruleValidate"
									:label-width="130"
					>
						<Collapse v-model="panelId" style="width: 100%; border: none">
							<Panel name="1">
								{{ $t("components.uiText.detail") }}
								<div slot="content">
									<Row>
									<#list columnList as column>
									<#if column.form>
                  	<#if column.formType == 'file'>
										<Col span="24">
                    <#else>
										<Col span="8">
										</#if>
											<!-- ${column.columnComment} -->
											<FormItem :label="$t('${className}.form.${column.attrName}')" prop="${column.attrName}">
											<#if column.formType == 'text'>
												<Input
																v-model="formData.${column.attrName}"
																type="text"
																maxlength="100"
																clearable
																:disabled="readonly"
																:placeholder="readonly ? '' : $t('${className}.form.placeholder.${column.attrName}')"
												></Input>
											<#elseif column.formType == 'textarea'>
												<Input
																v-model="formData.${column.attrName}"
																type="textarea"
																maxlength="500"
																show-word-limit
																:disabled="readonly"
																:autosize="{ minRows: 5, maxRows: 8 }"
																:placeholder="readonly ? '' : $t('${className}.form.placeholder.${column.attrName}')"
												></Input>
											<#elseif column.formType == 'editor'>
											<!-- 生成暂不支持富文本 -->
											<#elseif column.formType == 'select'>
												<Select
																v-model="formData.${column.attrName}"
																:clearable="true"
																:disabled="readonly"
																:placeholder="readonly ? '' : $t('${className}.form.placeholder.${column.attrName}')"
												>
													<Option
																	v-for="item in ${column.attrName?replace("Id", "")}List"
																	:value="item.id"
																	:key="item.id"
													>{{ item.name }}</Option>
												</Select>
											<#elseif column.formType == 'radio'>
												<RadioGroup
																v-model="formData.${column.attrName}"
																:disabled="readonly">
													<Radio label="1"><span>是</span></Radio>
													<Radio label="2"><span>否</span></Radio>
												</RadioGroup>
											<#elseif column.formType == 'checkbox'>
												<CheckboxGroup
																v-model="formData.${column.attrName}"
																:disabled="readonly">
													<Checkbox label="1"><span>选择1</span></Checkbox>
													<Checkbox label="2"><span>选择2</span></Checkbox>
													<Checkbox label="3"><span>选择3</span></Checkbox>
												</CheckboxGroup>
											<#elseif column.formType == 'date'>
												<DatePicker
																type="date"
																:editable="false"
																:clearable="true"
																format="yyyy-MM-dd"
																:disabled="readonly"
																@on-change="(dateStr) => {formData.${column.attrName} = dateStr;}"
																:value="formData.${column.attrName}"
																:placeholder="readonly ? '' : $t('${className}.form.placeholder.${column.attrName}')"
												>
												</DatePicker>
											<#elseif column.formType == 'datetime'>
												<DatePicker
																type="datetime"
																:editable="false"
																:clearable="true"
																format="yyyy-MM-dd HH:mm"
																:disabled="readonly"
																@on-change="(dateStr) => {formData.${column.attrName} = dateStr;}"
																:value="formData.${column.attrName}"
																:placeholder="readonly ? '' : $t('${className}.form.placeholder.${column.attrName}')"
												>
												</DatePicker>
											<#elseif column.formType == 'file'>
												<FileUpload
																ref="uploadFile"
																:action="uploadApi"
																limit="9"
																:maxSize="100 * 1024"
																:uploadedList="uploadedList"
																accept="doc,docx,pdf,xls,xlsx,csv,zip,txt,jpg,jpeg,png,bmp"
																@on-success="onUploadSuccess('uploadFile', '${column.attrName}')"
																@on-remove="onUploadSuccess('uploadFile', '${column.attrName}')"
																:isUpload="!readonly"
												>
													<div class="prompt">
														{{ $t('${className}.form.placeholder.files') }}
													</div>
												</FileUpload>
											<#elseif column.formType == 'orgPer'>
												<Input
																ref="userSelInput"
																v-model="formData.${column.attrName}"
																type="text"
																maxlength="100"
																clearable
																:disabled="readonly"
																:placeholder="readonly ? '' : $t('${className}.form.placeholder.${column.attrName}')"
																@on-focus="openUserSelModal"
												></Input>
											<#else>
												<Input
																v-model="formData.${column.attrName}"
																type="text"
																maxlength="100"
																clearable
																:disabled="readonly"
																:placeholder="readonly ? '' : $t('${className}.form.placeholder.${column.attrName}')"
												></Input>
											</#if>
											</FormItem>
										</Col>
									</#if>
									</#list>
									</Row>
								</div>
							</Panel>
						</Collapse>
					</Form>
					<Spin fix v-if="loading"></Spin>
				</div>
			</div>
		</div>
		<div class="panel-footer">
			<!-- 提交 -->
			<Button
							v-if="form.oprType !== 3"
							style="margin-left: 8px"
							type="primary"
							@click="handleSubmit"
							v-preventReClick="1000"
			>{{ $t("components.uiButton.ok") }}</Button>
			<!-- 返回 -->
			<Button style="margin-left: 8px" icon="ios-undo" @click="closeForm">
				{{ $t("components.uiButton.back") }}
			</Button>
		</div>
		<#if hasPerSel>
		<!-- 选择机构人员 -->
		<div v-if="enterpriseSelectUserObj.isShow">
			<EnterpriseSelectUser
							ref="enterpriseSelectUser"
							:isShow="enterpriseSelectUserObj.isShow"
							:choosedData="enterpriseSelectUserObj.choosedData"
							:isMulti="enterpriseSelectUserObj.isMulti"
							:orgObj="enterpriseSelectUserObj.rootOrgObj"
							@saveModel="onSelUserInfo"></EnterpriseSelectUser>
		</div>
		</#if>
	</div>
</template>
<script>
	import { mapState, mapGetters, mapActions } from "vuex";
  <#if hasFile>
	import FileUpload from "@/components/upload/file.vue"; // 文件上传(包含图片)
  </#if>
  <#if hasPerSel>
  import EnterpriseSelectUser from "@/components/common/enterpriseSelectUser.vue";
  </#if>
	import { imgUpload, getSysSortDict, previewPhoto } from "@/api/common.api";
	import * as ${className}Api from "@/api/${className}.api";
	import { findNode } from "@/assets/js/util";
	export default {
		name: "${className}Form",
		components: {
			<#if hasFile>
			FileUpload,
			</#if>
			<#if hasPerSel>
      EnterpriseSelectUser,
			</#if>
		},
		props : {
			form: {
				type: Object,
				default: {}
			}
		},
		data() {
      const readonly = this.form.oprType === 3;
			return {
        readonly: readonly,
				menuName: '', //模块名，根据菜单配置动态更改
				loading: false, //表单加载提示
				panelId: [1], //折叠面板
				uploadApi: imgUpload, //文件上传api
				uploadedList: [], //上传文件
				// 表单字段
				formData: {
					id: '',
					<#list columnList as column>
					<#if column.form>
					${column.attrName}: '', //${column.columnComment}
					</#if>
					</#list>
				},
        <#if hasPerSel>
				//人员选择
				enterpriseSelectUserObj: {
					isShow: false,
					isMulti: false,
          rootOrgObj: {},
					choosedData: {},
				},
				</#if>
				// 字段校验
				ruleValidate: {
					<#list columnList as column>
					<#if column.form && column.required>
					<#if column.formType == 'select' || column.formType == 'date' || column.formType == 'datetime'>
					${column.attrName}: [
						{required: !readonly, message: this.$t('${className}.form.valid.${column.attrName}'), trigger: "change"},
					],
					<#else>
					${column.attrName}: [
						{required: !readonly, message: this.$t('${className}.form.valid.${column.attrName}'), trigger: "blur"},
					],
					</#if>
					</#if>
					</#list>
				}
			}
		},
		computed: {
			...mapGetters(["pid", "userInfo"]),
		},
		created() {
			this.initView()
			this.setMenuName(路由名字); //根据路由动态获取菜单名称
		},
		methods: {
			initView(){
				if (this.form.oprType === 1) {
					//添加
					<#if hasPerSel>
					//回显登录人
					this.initPerson();
					</#if>
				} else if (this.form.oprType === 2) {
					//编辑
					this.initData(this.form);
					<#if hasPerSel>
					//回显登录人
					this.initPerson();
					</#if>
				} else {
					//详情
					this.initData(this.form);
					// this.getDetail();
				}
			},
			initData(data) {
				this.$set(this,"formData",JSON.parse(JSON.stringify(data)))
				<#list columnList as column>
				<#if column.form>
				<#if column.formType == 'file'>
        this.processFile('${column.attrName}')
				</#if>
				</#if>
				</#list>
			},
			<#if hasPerSel>
			//初始化回显人员
			initPerson(){
				if (!this.formData.xxxxPersonId) { //xxxxPersonId自行修改
					this.formData.xxxxPersonId = this.userInfo.personId;
					this.formData.xxxxPersonName = this.userInfo.personName;
				}
			},
			//选人组件返回用户信息
			openUserSelModal(index) {
				//组织机构根节点
				this.enterpriseSelectUserObj.rootOrgObj = {
					id: this.userInfo.id,
					shortName: this.userInfo.identityShortName,
					nodeType: this.userInfo.nodeType,
					nodeSite: this.userInfo.nodeSite,
				};
				//回显已选择人员
				this.enterpriseSelectUserObj.choosedData = [{ //xxxxPersonId自行修改
					personId: this.formData.xxxxPersonId || this.userInfo.personId,
					personName: this.formData.xxxxPersonName || this.userInfo.personName,
				}];
				//打开人员选择弹窗
				this.enterpriseSelectUserObj.isShow = true;
			},
			//人员选择返回信息
			onSelUserInfo(bol, val) {
				this.enterpriseSelectUserObj.isShow = bol;
				this.$refs.userSelInput.blur();
				if (Array.isArray(val) && val.length > 0) {
						this.formData.xxxxPersonId = val[0].personId; //xxxxPersonId自行修改
						this.formData.xxxxPersonName = val[0].personName;
				}
			},
			</#if>
			<#if hasFile>
			processFile(formKey){
				// 附件处理
				if (this.formData[formKey]) {
					let files = this.formData[formKey].split(",");
					previewPhoto(files).then((res) => {
							this.uploadedList = res.data.data; //多个文件上传，上传组件和此处的uploadedList需替换成对应的值
					});
				} else {
					this.uploadedList = [];
					this.$set(this.formData, formKey, "");
				}
			},
			onUploadSuccess(ref, fieldKey){
				setTimeout(() => {
					let data = this.$refs[ref].getFileList(),
							fileArr = [];
					data.forEach((item, index) => {
							fileArr.push(item.id);
					});
					this.formData[fieldKey] = fileArr.join(",");
				}, 50);
			},
			</#if>
			getDetail() {
				${className}Api.get${ClassName}Detail(this.form.id).then((res) => {
					if (res.code == 200) {
						this.initData(res.data);
					} else {
						this.$Message.error(res.msg);
					}
				});
			},
			handleSubmit (name) {
				this.$refs.formData.validate((valid) => {
					if (valid) {
						let url = this.formData.id ? "${ClassName}Edit" : "${ClassName}Add";
						${className}Api[url](this.formData).then((res) => {
							if (res.code == 200) {
								this.$Message.success(res.msg);
								this.closeForm();
							} else {
								this.$Message.error(res.msg);
							}
						});
					}
				});
			},
			closeForm() {
				this.$emit("closeForm");
			},
			//动态菜单名称
			setMenuName(menuPath){
				let menuList = JSON.parse(Storage.get('menuList'));
				let path = window.__POWERED_BY_QIANKUN__ ? <#noparse>`${Storage.get("activeAllRoute")}`</#noparse> : menuPath;
				let menu = findNode(menuList, "path", path);
				this.menuName = menu.name || $t("${className}.form.title");
			},
		}
	}
</script>

<style lang="less" scoped>

</style>